<template>
  <div class="div">
    <div class="left">左边</div>
    <div class="center">圣杯布局----中间</div>
    <div class="right">右边</div>
  </div>
  <div>
    <button @click="changeFontSize(32)">大</button>
    <button @click="changeFontSize(16)">中</button>
    <button @click="changeFontSize(8)">小</button>
  </div>
</template>

<script setup lang="ts">
import { useCssVar } from '@vueuse/core';

const changeFontSize = (newFontsize: number) => {
  // const rootFontSize = useCssVar('--fontSize');
  // console.log(':root中--size的值为：', rootFontSize.value);
  // rootFontSize.value = `${newFontsize}px`;
  console.log('document', document.documentElement.style.getPropertyValue('--fontSize'));
  const rootFontSize = `${newFontsize}px`;
  document.documentElement.style.setProperty('--fontSize', rootFontSize);
};
</script>

<style lang="scss" scoped>
.div {
  display: flex;
  justify-content: space-around;
  height: 100custom;

  .left {
    width: 100custom;
    height: 100%;
    background-color: rgb(81, 218, 152);
    font-size: var(--fontSize);
  }

  .right {
    width: 100custom;
    height: 100%;
    background-color: red;
  }

  .center {
    flex: 1;
    height: 100%;
  }
}
</style>
